<template>
  <div class="lmessage">
      <Bgimg>留言板</Bgimg>
      <div class="container">
          <div class="container-left">
              <div class="main-message">
                <SendMessage/>
                <div class="msg-comment">
                    <Comment v-for="item in list" :key="item"/>
                </div>
              </div>
          </div>
            <ContainerRight/>
      </div>
  </div>
</template>

<script>
import Comment from 'components/Comment.vue'
import SendMessage from 'components/SendMessage.vue'
import Bgimg from 'components/Bgimg.vue'
import ContainerRight from 'components/container/ContainerRight.vue'

export default {
    data() {
        return {
            list: [1,1,1,1,1]
        }
    },
    components: {
        Bgimg,
        ContainerRight,
        SendMessage,
        Comment
    }
}
</script>

<style scoped>
.main-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50rem;
    /* box-shadow: 0 0 10px rgb(223, 222, 222); */
    /* background-color: rgba(84, 178, 255, 0.164); */
    border-radius: 11px;
    font-size: var(--fontSize);
}
.msg-comment {
    margin: var(--mtop);
}
@media screen and (max-width:768px) {
    .writeMessage {
        box-shadow: none;
    }
    .msg-comment {
        width: 100%;
    }
}
</style>